<template>
  <el-dialog class="img-dialog" :visible.sync="dialogVisible" title="查看" width="1000px" top="8vh" append-to-body @close="closeDialog">
    <el-row v-if="dialogVisible" class="dialog-content">
      <el-row class="dialog-top">
        <div v-if="lagerFile.contentType !== 'video/mp4'">
          <el-image :src="lagerFile.url || lagerFile.fileUrl" alt fit="scale-down" :preview-src-list="previewList" />
        </div>
        <div v-else>
          <video :src="lagerFile.url || lagerFile.fileUrl" muted autoplay controls />
        </div>
      </el-row>
      <scroll-pane ref="scrollPane" class="tags-view-wrapper">
        <el-row class="dialog-bottom">
          <el-col v-for="(item,index) in fileList" :key="index">
            <div v-if="item.contentType !== 'video/mp4'" @click="previweFile(item)">
              <el-image :src="item.url || item.fileUrl" alt style="width: 100px; height: 100px" fit="cover" />
            </div>
            <div v-else @click="previweFile(item)">
              <video :src="item.url || item.fileUrl" style="width: 100px; height: 100px" />
            </div>
          </el-col>
        </el-row>
      </scroll-pane>
    </el-row>
  </el-dialog>
</template>
<script>
import ScrollPane from '../ScrollPane/scrollpane.vue'
export default {
  components: { ScrollPane },
  props: {},
  data() {
    return {
      title: '',
      fileList: [],
      dialogVisible: false,
      lagerFile: {},
      previewList: [],
      materialInfo: {} // 刀柄信息
    }
  },
  watch: {},
  mounted() {},
  methods: {
    // 传入文件list
    showDialogs(fileList) {
      this.previewList = []
      fileList.forEach((item) => {
        if (item.contentType !== 'video/mp4') {
          this.previewList.push(item.url || item.fileUrl)
        }
      })
      this.fileList = fileList
      this.lagerFile = fileList[0]
      this.dialogVisible = true
    },
    previweFile(item) {
      this.lagerFile = item
    },
    closeDialog() {
      Object.assign(this.$data, this.$options.data())
    }
  }
}
</script>
<style lang="scss">
.img-dialog {
  .el-dialog__body {
    padding: 0 !important;
  }
}
</style>
<style lang='scss' scoped>
.dialog-content {
  height: 60vh;
  min-height: 500px;
  .dialog-top {
    height: calc(60vh - 122px);
    min-height: 378px;
    background-color: rgba(0, 0, 0, 0.85);
    margin-bottom: 10px;
    div {
      text-align: center;
      .el-image,
      video {
        height: calc(60vh - 122px);
        min-height: 378px;
      }
    }
  }
  .tags-view-wrapper {
    background: #fff;
    border-bottom: 1px solid #d8dce5;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 0 1px 0 rgba(0, 0, 0, 0.04);
    height: 104px;
    .dialog-bottom {
      .el-col {
        width: 100px;
        margin: 0 3px;
        cursor: pointer;
      }
    }
  }
  .title {
    height: 30px;
    line-height: 30px;
    background-color: rgb(238, 237, 237);
    padding: 0 10px;
    margin-bottom: 2px;
    border-radius: 5px;
    font-weight: 600;
  }
}
</style>
